<template>
  <div class="uploadworks  details-container">
    <CommonHead></CommonHead>
    <div class="con">
      <div class="uploadworks-top">
        <p class="tile">上传作品</p>
        <div class="clearfix uploadworks-box">
          <div class="sculpture-le clearfix fl">
            <div class="fl sculpture-img">
              <img src="/src/assets/img/1.png" alt="" />
              <div>
                <p class="surname">Stefan</p>
                <p class="name-position">苏州 | 平面设计师</p>
              </div>
            </div>
          </div>
          <div class="fl overall-btn">
            <a href="">上传作品</a>
            <a href=""> 草稿箱（3）</a>
          </div>
        </div>
      </div>
      <div class="uploadworks-bot clearfix">
        <div class="fl le">
          <div class="shang-box pr">
            <img src="@/assets/img/18.jpg" class="img-bj w100" alt="" />
            <div class="hsnag">
              <img src="@/assets/img/jia.svg" alt="" />
              <p class="p1">请上传封面</p>
              <p class="p2">支持jpg/gif/png格式 <br />最佳尺寸800*450px</p>
            </div>
            <el-upload class="upload-demo" drag action="//run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" multiple>
            </el-upload>
          </div>
          <div class="overall-btn ta">
            <a href="" class="w100">上传封面（800*450）</a>
          </div>
          <div class="reminder-box">
            <p>温馨提示</p>
            <ul class="reminder-ul">
              <li>如果你拥有该作品的“原创著作权”请选择原创分类, 并建议在作品上打上“水印”</li>
              <li>如果分享他人作品或经验，请一定注明原作者姓名或昵称，尊重其他设计师。</li>
              <li>精致封面能吸引更多关注哦。</li>
              <li>如遇到图片无法删除情况，请尝试清除浏览器缓存或换个浏览器操作。</li>
            </ul>
          </div>
        </div>
        <div class="fr upload-list">
          <el-upload action="#" list-type="picture-card" :auto-upload="false">
            <el-icon>
              <Plus />
            </el-icon>
            <template #file="{ file }">
              <div>
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <el-icon><zoom-in /></el-icon>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                    <el-icon>
                      <Download />
                    </el-icon>
                  </span>
                  <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                    <el-icon>
                      <Delete />
                    </el-icon>
                  </span>
                </span>
              </div>
            </template>
          </el-upload>
          <el-dialog v-model="dialogVisible">
            <img w-full :src="dialogImageUrl" alt="Preview Image" />
          </el-dialog>
        </div>
      </div>
      <div class="uploadworks-foot">
        <div class="row">
          <div class="col-sm-12 col-lg-6">
            <div class="box-input">
              <p>行业</p>
              <div class="box-div">
                <div class="row">
                  <div class="col-sm ">
                    <el-select placeholder="--请选择分类--">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                  <div class="col-sm ml25 ">
                    <el-select placeholder="--请选择属性--">
                      <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-input">
              <p class="clearfix">标题 <span class="fr">3-30字</span></p>
              <div class="box-div">
                <el-input placeholder="请输入标题" />
              </div>
            </div>
            <div class="box-input">
              <p>版权</p>
              <div class="box-div">
                <el-select placeholder="--请选择版权--">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value" />
                </el-select>
              </div>
            </div>
          </div>
          <div class="col-sm-12 col-lg-6">
            <div class="box-input">
              <div class="box-div">
                <div class="row">
                  <div class="col-sm ">
                    <p>背景色</p>
                    <ul class="bj-ul clearfix">
                      <li class="active">
                        <span style="background: #fff"></span>
                      </li>
                      <li>
                        <span style="background: #d1d5d8"></span>
                      </li>
                      <li>
                        <span style="background: #7c706b"></span>
                      </li>
                      <li>
                        <span style="background: #000"></span>
                      </li>
                      <li>
                        <span style="background: #28324e"></span>
                      </li>
                      <li>
                        <span style="background: #553982"></span>
                      </li>
                      <li>
                        <span style="background: #3d8eb9"></span>
                      </li>
                      <li>
                        <span style="background: #00a885"></span>
                      </li>
                      <li>
                        <span style="background: #fac51c"></span>
                      </li>
                      <li>
                        <span style="background: #f37934"></span>
                      </li>
                    </ul>
                  </div>
                  <div class="col-sm ml25 ">
                    <p>自定义<span>六进制色值</span></p>
                    <div>
                      <el-input placeholder="#000000">
                        <template #append>
                          <span class="bj-span" style="background: #000"></span>
                        </template>
                      </el-input>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="box-input">
              <p>视频分享</p>
              <div class="box-div">
                <el-input placeholder="支持flash格式地址 (请使用 https:// 开头的资源链接)建议优酷视频等" />
              </div>
            </div>
            <div class="box-input">
              <p>上传文件格式</p>
              <div class="box-div">
                <div class="row">
                  <div class="col-sm layout-box ">
                    <el-select v-model="value1" multiple filterable allow-create :reserve-keyword="false"
                      placeholder="--选择文件格式--" class="sele-layout">
                      <el-option v-for="item in options1" :key="item.value" :label="item.label" :value="item.value" />
                    </el-select>
                  </div>
                  <div class="col-sm ml25 ">
                    <el-input placeholder="点击上传附件压缩包( zip,rar,7z )" />
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="text-box">
          <div class="box-input">
            <p>介绍</p>
            <div class="box-div">
              <el-input placeholder="与其他设计师分享你的设计灵感与思路" type="textarea" />
            </div>
          </div>
        </div>
        <div class="text-box text-box1">
          <div class="box-input">
            <p>模板特征</p>
            <div class="box-div">
              <el-input placeholder="示例：
  层状PSD
  用引导线引导12列。
  使用的谷歌字体
  完全可定制
  像素完美
  不包括图像" type="textarea" />
            </div>
          </div>
        </div>
        <div class="text-box text-box2">
          <div class="box-input">
            <p>包含文件</p>
            <div class="box-div">
              <el-input placeholder="示例：
  01_home.psd
  02_home-s2.psd
  03_home-s3.psd
  04_about.psd
  05_services.psd
  06_service-single.psd
  07 _博客. psd
  08_blog-single.psd
  09 _证明书. psd
  10 _ faqs.psd
  11_contact.psd
  12 _报价. psd" type="textarea" />
            </div>
          </div>
        </div>
        <div class="text-box text-box3">
          <div class="box-input">
            <p>版权信息</p>
            <div class="box-div">
              <el-input placeholder="示例：
  字体:思源Sans Pro" type="textarea" />
            </div>
          </div>
        </div>
        <div class="text-box text-box4">
          <div class="box-input">
            <p>标签</p>
            <div class="box-div">
              <el-tag v-for="tag in dynamicTags" :key="tag" class="mx-1" closable :disable-transitions="false"
                @close="handleClose(tag)">
                {{ tag }}
              </el-tag>
            </div>
            <ul class="boxs-ul clearfix">
              <li class="fl" v-for="tag in dynamicTags" :key="tag"><span> </span> {{ tag }}</li>
            </ul>
            <div class="radios">
              禁止右键保存：
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault1" /><label
                  class="form-check-label" for="flexRadioDefault1"> 是 </label>
              </div>
              <div class="form-check form-check-inline">
                <input class="form-check-input" type="radio" name="flexRadioDefault" id="flexRadioDefault2" /><label
                  class="form-check-label" for="flexRadioDefault2"> 否 </label>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <FootCopyright></FootCopyright>
  </div>
</template>
<script lang="ts" setup>
import { ref } from 'vue'
import { Delete, Download, Plus, ZoomIn } from '@element-plus/icons-vue'
import { ElInput } from 'element-plus'
import type { UploadFile } from 'element-plus'
const dialogImageUrl = ref('')
const dialogVisible = ref(false)
const disabled = ref(false)
const handleRemove = (file: UploadFile) => {
  console.log(file)
}
const handlePictureCardPreview = (file: UploadFile) => {
  dialogImageUrl.value = file.url!
  dialogVisible.value = true
}
const handleDownload = (file: UploadFile) => {
  console.log(file)
}
const options = [
  {
    value: 'Option1',
    label: 'Option1'
  },
  {
    value: 'Option2',
    label: 'Option2'
  },
  {
    value: 'Option3',
    label: 'Option3'
  },
  {
    value: 'Option4',
    label: 'Option4'
  },
  {
    value: 'Option5',
    label: 'Option5'
  }
]
const value1 = ref<string[]>([])
const options1 = [
  {
    value: 'Adobe lllustrator',
    label: 'Adobe lllustrator'
  },
  {
    value: 'Adobe Photoshop',
    label: 'Adobe Photoshop'
  },
  {
    value: 'Adobe XD',
    label: 'Adobe XD'
  },
  {
    value: 'Figma',
    label: 'Figma'
  },
  {
    value: 'Sketch',
    label: 'Sketch'
  },
  {
    value: 'other',
    label: 'other'
  }
]
const dynamicTags = ref(['注册页', '登录页', '引导页', '扁平', 'GUI'])
const inputVisible = ref(false)
const InputRef = ref<InstanceType<typeof ElInput>>()
const handleClose = (tag: string) => {
  dynamicTags.value.splice(dynamicTags.value.indexOf(tag), 1)
}

const handleInputConfirm = () => {
  if (dialogImageUrl.value) {
    dynamicTags.value.push(dialogImageUrl.value)
  }
  inputVisible.value = false
  dialogImageUrl.value = ''
}
</script>
